<template>
    <div>
        <div class="mblog">
            <h2 style="text-align: center">{{this.blog.title}}</h2>


            <el-divider></el-divider>
            <div class="markdown-body" v-html="this.blog.content"></div>
            <el-divider></el-divider>
            <!--评论-->
            <div style="float: right;">
                <img  src="../assets/remark.png" @click="showRemark"/>
                <span style="font-size: xx-large;color: orange">{{this.remarkCount}}</span>
            </div>
            <!--收藏-->
            <div style="float: right;">
                <img v-if="this.collected == false" src="../assets/collect.png" @click="collect"/>
                <img v-if="this.collected == true" src="../assets/collect1.png" @click="collect"/>
                <span style="font-size: xx-large;color: orange">{{this.collectCount}}</span>

            </div>
           <!--点赞-->
            <div style="float: right;">
            <img v-if="this.liked == false" src="../assets/like.png" @click="like"/>
            <img v-if="this.liked == true" src="../assets/like1.png" @click="like"/>
                <span style="font-size: xx-large;color: orange">{{this.likeCount}}</span>
            </div>
        <el-dialog
                :title="this.title"
                :visible.sync="this.centerDialogVisible"
                width="30%"
                center>
        <span slot="footer" class="dialog-footer">
            <el-button @click="this.centerDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="deleteBlog">确 定</el-button>
        </span>
        </el-dialog>



    </div>
        <div v-if="this.showInput">
            <!--//评论列表-->
            <template>
                <el-table
                        empty-text="暂无评论"
                        :data="remarkData"
                        style="width: 100%">
                    <el-table-column
                    >
                        <template scope="scope">
                            <img src="../assets/touxiang.png"/>  <i style="font-size: large;color: red">{{scope.row.username}}:</i> &nbsp;&nbsp;{{scope.row.remark}}
                        </template>
                    </el-table-column>
                </el-table>
            </template>
        <!--评论框-->
        <input type="text"
                style="width: 91%;height: 30px"
                placeholder="请输入内容"
               :value="this.input"
               @change="updateInput"
        />
        <el-button  size="small" style="width: 3%;margin-left: 10px;"  type="warning" round @click="sendRemark">发送</el-button>
        <el-button  size="small"  style="width: 3%"  type="warning" round  @click="hideShowInput">取消</el-button>
        </div>
    </div>
</template>

<script>
    // 导入所需依赖
    import Header from "../components/Header";

    //为了让markdown转换的文本更好看，使用这个文件进行渲染
    import "github-markdown-css/github-markdown.css"
    import messageModel from "../components/messageModel";

    export default {
        name: "BlogDetail",
        components: {Header, messageModel},
        data() {
            return {
                user: {
                    id: "",
                },
                centerDialogVisible: false,
                title:'您确定要删除此条博客吗？',
                blog: {
                    id: "",
                    title: "",
                    content: ""
                },
                ownBlog: false,
                liked: false,
                collected: false,
                likeCount: 0,
                collectCount: 0,
                remarkCount: 0,
                hasLogin: false,
                input: "",//输入评论
                showInput: false,
                remarkDTO: {
                    uid: "",
                    bid: "",
                    r: "",
                },
                remarkData: [
                ],
            }
        },
        methods:{
            updateInput(e){
                console.log(e.target.value)
                this.input=e.target.value
            },
            //点赞
            like() {
                const _this = this
                if(this.liked) {
                    // this.$message.error("已取消点赞");
                    this.liked = false
                    this.$axios.post("/blog/unlike?blogId=" + this.blog.id + "&userId=" + _this.$store.getters.getUser.id).then(res => {
                        console.log("文章点赞数")
                        console.log(res.data.data)
                        this.likeCount=res.data.data
                    })
                }else {
                    // this.$message.success("点赞成功");
                    this.liked = true
                    //点赞
                    this.$axios.post("/blog/like?blogId=" + this.blog.id + "&userId=" + _this.$store.getters.getUser.id).then(res => {
                        console.log("文章点赞数")
                        console.log(res.data.data)
                        this.likeCount=res.data.data
                    })
                }
            },
            //收藏
            collect() {
                const _this = this
                if(this.collected) {
                    // this.$message.error("已取消收藏");
                    this.collected = false
                    this.$axios.post("/blog/cancelCollect?blogId=" + this.blog.id + "&userId=" + _this.$store.getters.getUser.id).then(res => {
                        console.log("文章收藏数")
                        console.log(res.data.data)
                        this.collectCount = res.data.data
                    })
                }else {
                    // this.$message.success("收藏成功");
                    this.collected = true
                    //点赞
                    this.$axios.post("/blog/collect?blogId=" + this.blog.id + "&userId=" + _this.$store.getters.getUser.id).then(res => {
                        console.log("文章收藏数")
                        console.log(res.data.data)
                        this.collectCount = res.data.data
                    })
                }
            },

            //评论
            showRemark(){
                this.showInput = true;

            },
            hideShowInput(){
                this.showInput = false;
                this.input="";
            },
            sendRemark(){
                this.remarkDTO.bid = this.blog.id
                this.remarkDTO.uid = this.user.id
                this.remarkDTO.r = this.input
                console.log(this.remarkDTO)
                this.$axios.post("/remark/save",this.remarkDTO).then(res =>{
                    console.log("评论状态")
                    console.log(res.data.data)
                    if(res.data.data){
                        this.$message.success("评论成功，待审核!")
                    }
                })
                this.input="";
                this.showInput = false;
            }
            ,
            messageHandel(){
                this.centerDialogVisible = true
            },
            deleteBlog(){
                const _this = this
                const blogid = this.$route.params.blogId
                _this.$axios.post("/blog/delete/" + blogid,{
                    headers:{
                        "authorization":localStorage.getItem("token")
                    }
                }).then(res=>{
                    console.log(res)
                    const code = res.data.code
                    if (code === 200){
                        this.centerDialogVisible = false
                        _this.$router.push("/blogs")

                    }else {
                        this.$alert('删除失败！', '提示', {
                            confirmButtonText: '确定',
                        });
                    }
                })
            }
        },
        created() {
            //从路径中获取到博客id
            const blogId = this.$route.params.blogId
            console.log(blogId)
            const _this = this
            this.user.id =_this.$store.getters.getUser.id
            //按照博客id找到指定的博客，
            _this.$axios.get("/blog/" + blogId).then(res => {
                //获取到返回的博客信息，并且将该信息回显给页面
                const blog = res.data.data;

                _this.blog.id = blog.id
                _this.blog.title = blog.title
                _this.blog.description = blog.description

                /**
                 * 将markdown的文本转为正常文本
                 * */
                    //拿到markdown渲染资源对象
                var markDownIT = require("markdown-it")
                var md = new markDownIT()   //获取到markdown-it的对象
                var result = md.render(blog.content)    //将markdown文本渲染成html文本
                _this.blog.content = result //将正常文本赋值给页面显示

                //只有在当前的博客的用户id为1，才会显示编辑按钮
                _this.ownBlog = (1 === _this.$store.getters.getUser.id)

                //点赞
                this.$axios.post("/blog/islike?blogId=" + this.blog.id + "&userId=" + _this.$store.getters.getUser.id).then(res => {
                    console.log("是否点赞")
                    console.log(res.data.data)
                    this.liked = res.data.data.liked
                    this.collected = res.data.data.collected
                })
                this.$axios.post("/blog/likeCount?blogId=" + this.blog.id).then(res => {
                    console.log("文章点赞数")
                    console.log(res.data.data)
                    this.likeCount = res.data.data
                })
                this.$axios.post("/blog/collectCount?blogId=" + this.blog.id).then(res => {
                    console.log("文章收藏数")
                    console.log(res.data.data)
                    this.collectCount = res.data.data
                })

                this.$axios.post("/remark/getBlogRemarkList?blogId="+this.blog.id).then(res =>{
                    console.log("用户评论信息")
                    console.log(res.data.data)
                    this.remarkData = res.data.data.list
                    this.remarkCount = res.data.data.count
                })
            })

        }
    }

</script>

<style scoped>
    .mblog {
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        width: 100%;
        min-height: 760px;
        margin: 10px 15px;
    }
    /deep/.el-dialog__body{
        padding: 0 !important
    }
</style>